<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">素材中心</view>
		</view>	
		<view class="nav" :class="scrrol == true ? 'scrrolHeader02' : ''">
			<view class="navauto">
				<block v-for="(item, index) in menu" :key="index">
					<view class="menu" :data-index="index" @tap="setNavMenu">
						<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.text }}
						   <view class="line" :class="index == select ? 'menucolor02' : ''"></view>
						</view>
						
					</view>
				</block>
			</view>
		</view>
		<view class="clear_box"></view>
		<view class="clear_box02"></view>
		
		<block v-if="select == 0">
			<view class="material_box">
				<block v-for="(item, index) in info">
					<view class="material" :data-url="'/pages/personalcenter/material/details01?id='+item.id" @click="gotopage">
						<view class="material_img">
							<image :src="item.content" mode="widthFix"></image>
						</view>
						<view class="material_name">{{item.title}}</view>
					</view>
				</block>
			</view>
		</block>
		
		<block v-if="select == 1">
			<view class="material_box">
				<block v-for="(item, index) in info">
					<view class="material" :data-url="'/pages/personalcenter/material/details02?id='+item.id" @click="gotopage">
						<view class="material_img">
							<image :src="item.content" mode="widthFix"></image>
						</view>
						<view class="material_name">{{item.title}}</view>
					</view>
				</block>
			</view>
		</block>
		
		<block v-if="select == 2">
			<block v-for="(item, index) in info">
				<view class="article_box" :data-url="'/pages/personalcenter/material/details03?id='+item.id" @click="gotopage">
					<view class="title">{{item.title}}</view>
					<view class="value">{{item.content}}</view>
					<view class="time">{{item.time}}</view>
				</view>
			</block>
		</block>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				scrrol:false,
				info:'',
				select:0,
				menu: [
					{
						text: '视频'
					},
					{
						text: '图片'
					},
					{
						text: '文案'
					},
				],
				type:1,
			}
		},
		onLoad() {
			let that = this;
			that.loadData();
		},
		methods: {
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				that.page = 1;
				that.type = index + 1;
				that.loadData();
			},
			loadData() {
				let that = this;
				that.Net._get('auth/material', {per_page:'10',page:that.page,type:that.type}, res => {
					if (res.code == 200) {
						that.info = res.data.data;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			var that = this;
			that.page++;
			that.Net._get('auth/material', {per_page:'10',page:that.page,type:that.type}, res => {
				if (res.code == 200) {
				//console.log(res)
					if (res.data.data == '') {
						uni.showToast({
							title: '已经是最后一页了',
							duration: 2000,
							icon: 'none'
						});
					} else {
						that.info = that.info.concat(res.data.data); //将数据拼接在一起
					}
				} else if (res.code == 0) {
					that.Msg.Success(res.msg, res => {});
				}
			});
		},
	}
</script>

<style>
	
	.scrrolHeader{
		background-color: #FF7701 !important;
	}
	
	.scrrolHeader02{
		background-color: #fff !important;
	}
	
	.clear_box02{
		height: 13.5vw !important;
	}
	
	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		position: fixed;
		left: 0;
		top: calc(13.4vw + var(--status-bar-height));
		z-index: 99;
		/* background-color: #fff;
			border-bottom: 1px solid #e8e8e8; */
		box-sizing: border-box;
	}
	
	.nav .navauto {
		width: fit-content;
		display: flex;
		justify-content:space-around;
		/* margin-left: 4%; */
		min-width: 100%;
	}
	
	.nav .navauto .menu {
		/* width: 20%; */
		
	}
	
	.nav .navauto .menu .text {
		font-size: 4.5vw;
		color: #666666;
		text-align: center;
		line-height: 13.5vw;
		position: relative;
	}
	
	.nav .navauto .menu .line {
		width: 100%;
		height: 2.3vw;
		background-color: #FF7701;
		border-radius: 2.3vw;
		position: absolute;
		left: calc(50% - 50%);
		bottom: 3.5vw;
		z-index: -1;
		display: none;
		
	}
	
	.menucolor {
		color: #091624 !important;
		font-weight: bold;
		font-size: 4.7vw !important;
	}
	
	.menucolor02 {
		display: block !important;
	}
	
	.menucolor03 {
		background-color: #FF9822 !important;
	}
	
	.material_box{
		width: 92%;
		margin: 4% auto 0;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}
	
	.material_box::after {
		flex: auto;
		content: '';
	}
	
	.material_box .material{
		width: 48%;
		margin-left: 4%;
		margin-bottom: 4%;
	}
	
	.material_box .material:nth-child(2n + 1){
		margin-left: 0;
	}
	
	.material_box .material .material_img{
		width: 100%;
		background-color: #fff;
		border-radius: 4vw;
		padding: 4vw 0;
		text-align: center;
	}
	
	.material_box .material .material_img image{
		width: 60%;
		margin: 0 auto;
	}
	
	.material_box .material .material_name{
		width: 100%;
		margin-top: 2vw;
		text-align: center;
		font-size: 4vw;
		color: #333;
		font-weight: bold;
	}
	
	.article_box{
		width: 92%;
		margin: 4% auto 0;
		background-color: #fff;
		border-radius: 4vw;
		padding: 4vw;
	}
	
	.article_box .title{
		font-size: 4vw;
		color: #333;
		font-weight: bold;
	}
	
	.article_box .value{
		font-size: 3.5vw;
		color: #333;
		margin-top: 2vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	
	.article_box .time{
		font-size: 3.2vw;
		margin-top: 2vw;
		color: #999;
	}
	

</style>
